<template>

  <div class="table-page-search-wrapper">
    <div class="top" style=" margin-top:21px">
      访问核心数据
    </div>
    <div class="topCard">
      <div class="topDIv">
        <img src="../../../../src/assets/operations/aCard1.png" alt="" class="img">
        <div class="aCardTitle">昨日订单数</div>
        <div class="Number">{{data.yesterdayOrderNumber}}</div>
      </div>
      <div class="topDIv">
        <img src="../../../../src/assets/operations/aCard2.png" alt="" class="img">
        <div class="aCardTitle">累计订单</div>
        <div class="Number">{{data.accumulativeOrderNumber}}</div>
      </div>
      <div class="topDIv">
        <img src="../../../../src/assets/operations/aCard3.png" alt="" class="img">
        <div class="aCardTitle">昨日交易额</div>
        <div class="Number">{{data.yesterdayTransactionVolume}}</div>
      </div>
      <div class="topDIv">
        <img src="../../../../src/assets/operations/aCard4.png" alt="" class="img">
        <div class="aCardTitle">累计交易额</div>
        <div class="Number">{{data.accumulativeTransactionVolume}}</div>
      </div>
    </div>
  <div class="top">
    <div>设备产生费用排位</div>
  </div>
  <a-card :bordered="false" class="aCard">
    <a-table ref="table"  rowKey="id" size="middle" :columns="couponColumns" :dataSource="segmentedData" :pagination="ipaginations"> </a-table>
  </a-card>
  </div>
</template>
<script>

const couponColumns = [
  {
    title: '序号',
    dataIndex: '',
    key: 'rowIndex',
    width: 120,
    align: 'center',
    customRender: function (t, r, index) {
      console.log(index)
      return parseInt(index) + 1
    }
  },
  {
    title: '设备编号',
    dataIndex: 'deviceName',
    align: 'center'
  },
  {
    title: '费用',
    dataIndex: 'orderCost',
    align: 'center'
  },
  {
    title: '创建时间',
    dataIndex: 'createTime',
    align: "center",
  },
]
import { statisticalExpenses, orderTrendChart } from "@/api/umbrella/umbrellaIndex";
import { STable } from '@/views/box/components'
import ARow from 'ant-design-vue/es/grid/Row'
import ACol from 'ant-design-vue/es/grid/Col'
import moment from 'moment'
import {mapState } from 'vuex'
export default {
  components: {
    ACol,
    ARow,
    STable
  },
  data() {
    return {
      data:{},
      segmentedData: [],
      couponColumns,
      segmentedParams:{
        current: 1,
        pageSize: 10
      },
      ipaginations:{
        current: 1,
        pageSize: 10,
        pageSizeOptions: ['10', '20', '30'],
        showTotal: (total, range) => {
          return range[0] + '-' + range[1] + ' 共' + total + '条'
        },
        showSizeChanger: true,
        total: 0
      }
    }
  },
  computed: {
    ...mapState({
      // 后台菜单
      menus: state => state.user.authPermissionList.filter(e => e.path == '/umbrella'),
    })
  },
  created() {
    this.getSegmentedData();
    this.getOrderTrendChart();
  },
  mounted() {},
  beforeDestroy() {},
  methods: {
    //分页、排序、筛选变化时触发


    //趋势图
    getOrderTrendChart(){
      orderTrendChart().then(res =>{
         this.data = res.data
      })
    },
    //列表
    getSegmentedData() {
      statisticalExpenses(this.segmentedParams).then(res => {
        if (res.code === 200) {
          console.log(res.data)
          this.segmentedData = res.data.records
          this.ipagination.total = res.data.total
        } else {
          this.$message.error(res.msg || res.message)
        }
      })
    },
    // 跳转的链接/路由
    handleJumpPath(menu) {
      console.log(menu, 'xxxxxxxxx*****************')
      if (menu.meta.internalOrExternal) {
       this.getQueryLocationUrl(menu.id)
      } else {
        this.$router.push(menu.path)
      }
    },

    //获取外部链接/安装包链接
    getQueryLocationUrl(id) {
      const data = {
        id
      }
      queryLocationUrl(data).then(res => {
        if (res.code === 0) {
          window.open(res.result, '_blank')
        } else {
          this.$message.error(res.data.msg)
        }
      })
    },
  }
}
</script>
<style lang="less" scoped>
  .top {
    color: #303133;
    font-size: 16px;
    font-weight: 600;
    margin-left: 30px;
  }
  .aCard {
    margin: 20px 30px 30px 30px !important;
  }
/deep/ .ant-row{
  margin-left: 0 !important;
  margin-right: 0!important;
}
  .topCard{
    padding:20px 0px 40px 30px;
    display:flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .topDIv{
    position: relative;
    margin-bottom: 10px;
  }
  .aCardTitle{
    position:absolute;
    font-size: 16px;
    color:#fff;
    top:30px;
    left:40px
  }
  .Number{
    position:absolute;
    font-size: 46px;
    color:#fff;
    top:64px;
    left:40px
  }
  @media screen and (max-width: 1680px) {
    .img{
      width:340px !important;
    }
    .aCardTitle{
      top:20px !important;
    }
    .Number{
      font-size: 44px !important;
      top:44px !important;
    }
  }
  @media screen and (max-width: 1600px) {
    .img{
      width:320px !important;
    }
    .aCardTitle{
      top:20px !important;
      left:30px
    }
    .Number{
      font-size: 44px !important;
      top:44px !important;
      left:30px
    }
  }
  @media screen and (max-width: 1440px) {
    .img{
      width:280px !important;
    }
    .aCardTitle{
      top:20px !important;
    }
    .Number{
      font-size: 36px !important;
      top:44px !important;
    }
  }
  @media screen and (max-width: 1400px) {
    .img{
      width:270px !important;
    }
    .aCardTitle{
      top:18px !important;
      left:25px
    }
    .Number{
      font-size: 34px !important;
      top:40px !important;
      left:25px
    }
  }
  @media screen and (max-width: 1280px) {
    .img{
      width:245px !important;
    }
    .aCardTitle{
      left:20px
    }
    .Number{
      font-size: 28px !important;
      top:40px !important;
      left:20px
    }
  }
  @media screen and (max-width: 1024px) {
    .img{
      width:230px !important;
    }
    .aCardTitle{
      top:14px !important;
      left:20px
    }
    .Number{
      font-size: 24px !important;
      top:38px !important;
      left:20px
    }
  }
</style>
